import React, { useContext } from 'react';
import { Row, Col } from 'antd';
import { ExpertsUpdateContext } from '../common/ExpertsContext';
import { DictionarySpan } from '../common/Format';

const UpdateExpertsFormDocumentInfoView: React.FC = () => {
  const { prefixCls, expertsInfo } = useContext(ExpertsUpdateContext);
  const { cardNum, cardTypeName, bankName, bankNum } = expertsInfo;

  return (
    <Row className={`${prefixCls}info-view`}>
      <Col span={12}>
        <span className={'label'}>证件类型：</span>
        {DictionarySpan(cardTypeName) ?? '--'}
      </Col>

      <Col span={12}>
        <span className={'label'}>证件号码：</span>
        <span>{cardNum ?? '--'}</span>
      </Col>

      <Col span={12}>
        <span className={'label'}>开户行名称：</span>
        <span>{bankName ?? '--'}</span>
      </Col>

      <Col span={12}>
        <span className={'label'}>银行账户：</span>
        <span>{bankNum ?? '--'}</span>
      </Col>
    </Row>
  );
};

export default UpdateExpertsFormDocumentInfoView;
